<template>
  <div>
    <!--  搜索框-->
    <el-form :inline="true" :model="formInline" ref="formInline" style="padding-top: 30px">
      <el-form-item label="广告标语">
        <el-input v-model="formInline.title" placeholder="广告标语"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="formInline.status" placeholder="状态">
          <el-option label="正常" value="0"></el-option>
          <el-option label="禁用" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit"><i class="el-icon-search"></i>查询</el-button>
        <el-button type="primary" @click="Reset"><i class="el-icon-refresh"></i>重置</el-button>
        <el-button type="primary" @click="inserts"><i class="el-icon-refresh"></i>添加</el-button>
      </el-form-item>
    </el-form>

    <!--修改-->
    <el-dialog title="修改信息"  :visible.sync="upformstatus" width="80%">
      <el-form ref="upform"  :rules="uprules" :model="upform"  >
        <el-form-item label="id" prop="advId"  style="display: none" >
          <el-input v-model="upform.advId" placeholder="id"></el-input>
        </el-form-item>
        <el-form-item label="上传图" prop="imageUrl">
          <!--      action="http://localhost:8888/sys/car/upload"       使用绝对路径-->
          <!--         :headers="token" action不走路由转发，需要自己带上请求头 -->
          <el-upload
              class="avatar-uploader"
              action="http://localhost:9000/core/teacher/upload"
              :headers="token"
              :show-file-list="false"
              :on-success="handleAvatarSuccess1"
              :before-upload="beforeAvatarUpload1"
          >
            <img v-if="upform.imageUrl" :src="upform.imageUrl" class="avatar" width="100px" height="100px"/>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="广告标语" prop="title">
          <el-input v-model="upform.title" placeholder="广告标语" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="广告连接" prop="linkUrl">
          <el-input v-model="upform.linkUrl" placeholder="广告连接" style="width: 80%"></el-input>
        </el-form-item>

        <el-form-item label="排序" prop="sort">
          <el-input v-model="upform.sort" placeholder="排序" style="width: 80%"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                        <el-button @click="upquxiaoup">取 消</el-button>
                        <el-button type="primary" @click="upsaveupForm" >确 定</el-button>
                    </span>
    </el-dialog>

    <!--新增-->
    <el-dialog title="新增"  :visible.sync="informstatus" width="80%">
      <el-form ref="inform" :rules="inrules" :model="inform"  >
        <el-form-item label="上传图"  prop="imageUrl">
          <!--      action="http://localhost:8888/sys/car/upload"       使用绝对路径-->
          <!--         :headers="token" action不走路由转发，需要自己带上请求头 -->
          <el-upload
              class="avatar-uploader"
              action="http://localhost:9000/core/teacher/upload"
              :headers="token"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
          >
            <img v-if="inform.imageUrl" :src="inform.imageUrl" class="avatar" width="80%" height="100px"/>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="广告标语" prop="title">
          <el-input v-model="inform.title" placeholder="广告标语" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="广告连接" prop="linkUrl">
          <el-input v-model="inform.linkUrl" placeholder="广告连接" style="width: 80%"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                        <el-button @click="inquxiaoup">取 消</el-button>
                        <el-button type="primary" @click="insaveupForm" >确 定</el-button>
                    </span>
    </el-dialog>
    <!--  //表格-->
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          fixed
          prop="advId"
          label="序号">
      </el-table-column>
      <el-table-column
          prop="imageUrl"
          label="广告图片">
        <template slot-scope="scope">
          <img :src="scope.row.imageUrl" width="90%" height="50px">
        </template>
      </el-table-column>
      <el-table-column
          prop="title"
          label="广告标题">
      </el-table-column>

      <el-table-column
          prop="sort"
          label="排序">
      </el-table-column>
      <el-table-column
          prop="status"
          label="状态">
        <template slot-scope="scope">
          <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              :active-value="0"
              :inactive-value="1"
              active-text="启用"
              inactive-text="禁用"
              @change="changeStatus(scope.row.advId,scope.row.status)"
              inactive-color="#ff4949">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作">
        <template slot-scope="scope">

          <el-button @click="handleClick(scope.row)" type="success" size="small">删除</el-button>
          <el-button type="primary" size="small" @click="fenchengClick(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--  分页-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5,10,15]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "lunbo",
  data(){
    return {
      token:{token:sessionStorage.getItem("token")},
      //搜索框对象
      formInline:{},
      //表个对象
      tableData:[],
      //分页
      currentPage:1,
      pageSize:5,
      total:0,
      //修改框状态
      upformstatus:false,
      //修改框对象
      upform:{},

      //新增框状态
      informstatus:false,
      //新增对象
      inform:{},
      uprules:{
        imageUrl:[
          { required: true, message: '请选择图片', trigger: 'blur' },
        ],
        title:[
          { required: true, message: '请输入广告标语', trigger: 'blur' },
        ],
        linkUrl:[
          { required: true, message: '请输入广告链接', trigger: 'blur' },
        ],
        sort:[
          { required: true, message: '排序不可为空', trigger: 'blur' },
        ],
      },
      inrules:{
        imageUrl:[
          { required: true, message: '请选择图片', trigger: 'blur' },
        ],
        title:[
          { required: true, message: '请输入广告标语', trigger: 'blur' },
        ],
        linkUrl:[
          { required: true, message: '请输入广告链接', trigger: 'blur' },
        ],
        sort:[
          { required: true, message: '排序不可为空', trigger: 'blur' },
        ],
      }
    }
  },
  created() {
    this.init();
  },
  methods:{

    init(){
      var that = this;
      this.$http.post('/home/banner/getAllBanner/'+this.currentPage+"/"+this.pageSize,this.formInline).then(function (resp){
        that.tableData=resp.data.result.records
        that.total=resp.data.result.total
      })
    },
    //分页改变
    handleSizeChange(val) {
      this.pageSize=val;
      this.init();
    },
    handleCurrentChange(val) {
      this.currentPage=val;
      this.init();
    },
    //搜索=======================================================
    //查询按钮
    onSubmit(){
      this.init();
    },

    //重置按钮
    Reset(){
      this.$refs.formInline.resetFields();
      this.formInline={}
    },
    //新增
    inserts(){
      this.informstatus=true;
    },

    //表格方法============================================================
    //删除
    handleClick(item){
      var that = this
      this.$http.get("/home/banner/deleteById?advId="+item.advId).then(function (resp){
        if(resp.data.code==200){
          that.init()
        }
      })
    },
    //修改
    fenchengClick(item){
      this.upform=item;
      this.upformstatus=true
    },
    //修改状态
    changeStatus(id,status){
      var that = this;
      this.$http.get('/home/banner/updateStatus?advId='+id+"&status="+status).then(function (resp) {
        if(resp.data.code==200){
          that.init()
        }
      })
    },
    //修改取消
    upquxiaoup(){
      this.upformstatus=false;
      this.upform={};
      this.$refs.upform.resetFields();
    },
    //修改确认
    upsaveupForm(){
      var that = this;
      this.$refs.upform.validate((valid) => {
        if (valid) {
          this.$http.post(`/home/banner/updateStatusById`,this.upform).then(function (resp){
            if(resp.data.code==200){
              that.init()
              that.upformstatus=false;
              that.upform={};
              that.$refs.upform.resetFields();
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //新增====================================================
    inquxiaoup(){
      this.informstatus=false;
      this.$refs.inform.resetFields();
      this.inform={};
    },
    insaveupForm(){
      var that = this;
      if(this.inform.imageUrl==""){
        this.$message.error("正确填写全部信息后上传")
      }else {
        this.$refs.inform.validate((valid) => {
          if (valid) {
            this.$http.post(`/home/banner/insertBanner`, this.inform).then(function (resp) {
              if (resp.data.code == 200) {
                that.init()
                that.informstatus = false;
                that.inform = {};
                that.$refs.inform.resetFields();
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    },

    //上传图片成功
    //图片上传成 功后执行
    handleAvatarSuccess(res, file){
      //回显路径
      console.log(res)
      this.inform.imageUrl=res;
      console.log(this.inform.imageUrl)
    },
    beforeAvatarUpload(file) {

      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isLt2M;
    },
    //修改上传上传
    handleAvatarSuccess1(res, file){
      //回显路径
      this.upform.imageUrl=res;
    },
    beforeAvatarUpload1(file) {

      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isLt2M;
    },
  }
}
</script>

<style scoped>

</style>